<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
        label.heading {
            font-weight: 600;
        }
        .payment-form{
            width: 300px;
            margin-left: auto;
            margin-right: auto;
            padding: 10px;
            border: 1px #333 solid;
        }
    </style>
</head>
<body>
<body style="background: #fff;">
<form id="checkout-form" action="" method="post" class="payment-form">

    <label for="firstName" class="heading">First Name</label>
    <br>
    <input type="text" name="firstName" id="firstName"></br><br>

    <label for="LastName" class="heading">Last Name</label>
    <br>
    <input type="text" name="LastName" id="LastName"></br><br>

    <label for="amount" class="heading">Amount(USD)</label>
    <br>
    <input type="text" name="amount" id="amount"></br><br>

    <div id="dropin-container"></div>
    <br>
    <button type="submit">pay with BrainTree</button>

</form>
</body>
</body>
</html> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://js.braintreegateway.com/js/braintree-2.31.0.min.js"></script>
<script type="text/javascript">
	$.ajax({
        url:'__APP__/Bpay/tokens',
        type:'get',
        dataType:'json',
        success: function(data){
        	console.log(data);
            braintree.setup(data,'dropin',{container:'dropin-container'});
        }

    })
</script>